<template>
  <ex-dialog
    width="600px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form
      :inline="true"
      :rules="rules"
      :model="firstForm"
      ref="firstForm"
      label-width="150px"
    >
      <el-form-item label="选择店铺：" prop="merchantId">
        <el-select v-model="firstForm.merchantId"  filterable placeholder="请选择" :disabled="pathType == 'edit'" @change="handlemerchantId">
          <el-option
            v-for="item in shopList"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设置服务费率：" prop="serviceFee">
        <el-input v-model="firstForm.serviceFee" placeholder="0~100">
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="结算方式：" prop="settlementType">
        <el-select v-model="firstForm.settlementType"  filterable placeholder="请选择">
          <el-option
            v-for="item in settlementTypeList"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="消费打折：" prop="discountType">
        <el-radio-group v-model="firstForm.discountType">
          <el-radio :label="2">无</el-radio>
          <el-radio :label="1" class="rioBox">
            <span>打</span>
            <el-form-item 
              prop="discount"
              v-if="firstForm.discountType == 1" >
              <el-input v-model="firstForm.discount" placeholder="0~10折">
                <template slot="append">折</template>
              </el-input>
            </el-form-item>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="其他活动：">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="firstForm.activityContent"
          show-word-limit
          :autosize="{ minRows: 4}"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="firstForm.sort" placeholder="请输入排序号">
          
        </el-input>
      </el-form-item>
      <el-form-item class="bot_box">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitForm('firstForm')" v-if="pathType == 'add'">保存</el-button>
        <el-button type="primary" @click="editForm('firstForm')" v-if="pathType == 'edit'">修改</el-button>
      </el-form-item>
    </el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import {shopSelectDown,adminDict,addCardShop,cardShopdetail,editCardShop} from "@/api/bridgeCard";


export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    assetId: String,
    id: String,
    pathType: String,
  },
  data() {
    return {
      title: '新增参与商家',
      action: process.env.VUE_APP_BASE_API + "/common/v1/uploadFile",
      shopList:[],// 店铺列表
      settlementTypeList:[],//结算类型
			firstForm: {
        merchantId: '',
        merchantName: '',
				shopId: '',
        serviceFee: '',
        settlementType: '',
        discount: '',
				activityContent: '',
        discountType: 2,
        sort: '',
        assetId: '',
			},
			rules: {
        merchantId: [{ required: true, message: "请选择卡有效期类型", trigger: "change" }],
        serviceFee: [{ required: true, message: "请输入费率", trigger: "blur" }],
        settlementType: [{ required: true, message: "请选择卡结算方式", trigger: "change" }],
        discountType: [{ required: true, message: "请选择打折类型", trigger: "change" }],
        discount: [
          { required: true, message: "请输入折扣", trigger: "blur" },
        ],
        sort: [
          { required: true, message: "请输入排序号", trigger: "blur" },
        ],
        validityEndTime: [{ required: true, message: "请选择截止日期", trigger: "change" }],
      }
    }
  },
  computed: {
   
  },
  created() {
    console.log('assetId',this.assetId)
    this.getShopDict()
    this.getlinkagelist()
    if(this.pathType == 'edit'){
      this.title = '编辑参与商家'
      this.getDetail()
    }
	},
  methods: {
    //获取下拉店铺
    getShopDict(){
      shopSelectDown('').then((res) => {
        console.log('res',res)
        if(res.code == 200){
          this.shopList = res.result
        }
      });
    },
    getlinkagelist() {
      //获取有效期字典
      const params = {
        dictType: "asset_card_weal_settlement_type ",
      };
      adminDict(params).then((res) => {
        this.settlementTypeList = res.result[0].dictList;
      });
    },
    handlemerchantId(){
      this.selShopList = []
      console.log('this.shoptype',this.shopList)
        this.shopList.forEach(item =>{
          if(this.firstForm.merchantId == item.id){
            var additionalValue = JSON.parse(item.additionalValue)
            
            this.firstForm.shopId = additionalValue.shopId
            this.firstForm.merchantName =item.value
          }
        })
    },
    //详情
    getDetail(){
      var data = {
        id: this.id
      }
			cardShopdetail(data).then(res => {
        const {result} = res
        console.log('platformDetail',result)
        this.firstForm.merchantId = result.merchantId
        this.firstForm.merchantName = result.merchantName
        this.firstForm.shopId = result.shopId
        this.firstForm.serviceFee = result.serviceFee
        this.firstForm.settlementType = result.settlementType
        this.firstForm.discount = result.discount
        this.firstForm.activityContent = result.activityContent
        this.firstForm.discountType = parseInt(result.discountType)
        this.firstForm.sort = result.sort
        this.firstForm.assetId = result.assetId
        
      }).finally(() => {
        this.loading = false
      })
    },
    
    //新建子账号
    submitForm(formName) {
      console.log('formName',formName)
      this.$refs[formName].validate((valid) => {
        console.log('valid',this.assetId)
        if (valid) {
          let Base64 = require("js-base64").Base64;
          var assetIntroduce = Base64.encode(this.firstForm.activityContent)
          this.firstForm.assetId = this.assetId
          
          var data = {
            ...this.firstForm
          }
          addCardShop(data).then(res => {
            this.handleSuccess("新增成功")
          }).finally(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //编辑
    editForm(formName) {
      console.log('formName',formName)
      this.$refs[formName].validate((valid) => {
        console.log('valid',this.assetId)
        if (valid) {
          let Base64 = require("js-base64").Base64;
          var assetIntroduce = Base64.encode(this.firstForm.activityContent)
          this.firstForm.assetId = this.assetId
          
          var data = {
            id: this.id,
            ...this.firstForm
          }
          editCardShop(data).then(res => {
            this.handleSuccess("修改成功")
          }).finally(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>

.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
  
}
.cover_img {
  width: 208px;
  height: 128px;
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  width: 208px !important;
  height: 128px !important;
}
.avatar-uploader .el-upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 208px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}
.el-input{
    width: 250px !important; 
}
.el-select,.el-textarea{
    width: 250px !important; 
}
.bot_box{
  display: flex !important;
  justify-content: center;
}
.el-radio{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  
}
.el-radio-group{
  display: flex;
}
.rioBox{
  height: 36px;
  ::v-deep .el-radio__label{
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }
  ::v-deep .el-input{
    width: 140px !important; 
  }
}
.el-form--inline .el-form-item {
    display: flex;
}
</style>
